<template>
    <div class="city">
        <div class='hot-city'>
            <div class="h-c">热门城市</div>
            <!-- <van-grid :gutter="10" :clickable='true'>
                <van-grid-item   text="深圳" />
                <van-grid-item  text="上海" />
                <van-grid-item  text="北京" />
                <van-grid-item  text="广州" />    
            </van-grid> -->
            <div class='selcity'>
                <span class='scity'>武汉</span> <span class='scity'>深圳</span> <span class='scity'>成都</span> <span class='scity'>青岛</span>
            </div>
        </div>
        <van-index-bar>
            <van-index-anchor index="A" />
            <van-cell title="文本" />
            <van-cell title="文本" />
            <van-cell title="文本" />

            <van-index-anchor index="B" />
            <van-cell title="文本" />
            <van-cell title="文本" />
            <van-cell title="文本" />

            <van-index-anchor index="C" />
            <van-cell title="文本" />
            <van-cell title="文本" />
            <van-cell title="文本" />

             <van-index-anchor index="D" />
            <van-cell title="文本" />
            <van-cell title="文本" />
            <van-cell title="文本" />
        </van-index-bar>
    </div>
</template>
<script>
import Vue from 'vue';
import { IndexBar, IndexAnchor,Cell,Grid, GridItem } from 'vant';

Vue.use(IndexBar);
Vue.use(IndexAnchor);
Vue.use(Cell);
Vue.use(Grid);
Vue.use(GridItem);
export default {
    created (){
         this.$store.commit('common/setIsShow',false)
    },
    data(){
        return {
            cityid:[
                {
                    id:57,cityname:'武汉'
                },
                {
                    id:58,cityname:"深圳"
                },
                {
                    id:59,cityname:'成都'
                },
                {
                    id:60,cityname:'青岛'
                },
            ]
        }
    },
    methods:{
        getcityid(){
            console.log("adasd");
        },
    },
    mounted(){
        var getcity = document.getElementsByClassName("scity")
        
        var _this = this;
        for(let i=0;i<getcity.length;i++){
        getcity[i].onclick=function(){
            console.log(_this.cityid[i].id);
            _this.$router.push('/?ci='+_this.cityid[i].id+'&'+_this.cityid[i].cityname)
            localStorage.setItem('cityid',_this.cityid[i].id)
            localStorage.setItem('cityname',_this.cityid[i].cityname)
        }
        }
    },
    beforeDestroy(){
        this.$store.commit('common/setIsShow',true)
    },
}
</script>
<style scoped>
.city {
    background-color:#EBEBEB;
}
.hot-city{
    padding:15px;
}
.h-c {
    font-size: 16px;
    color:black;
    padding-bottom:10px;
}
.selciity {
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.selcity span {
    display: inline-block;
    width:70px;
    height: 50px;
    border:1px solid gray;
    text-align: center;
    line-height: 50px;
    border-radius: 10px;

}
</style>